<template>
	<MyPage title="账单" :isback="true">
		<!-- <view slot="right">常见问题</view> -->
		<view slot="gBody">
			<view class="query" style="margin-top: 25px;">
				<text @click="dateShow=true">选择日期<u-icon name="arrow-down-fill" size="16"></u-icon></text>
				<text @click="typeShow=true">{{typeList[query.type].text}}<u-icon name="arrow-down-fill" size="16"></u-icon></text>
			</view>
			<u-picker mode="time" v-model="dateShow" :params="dateParams" start-year="2020" :end-year="new Date().getFullYear()" @confirm="dateClick"></u-picker>
			<u-action-sheet :list="typeList" v-model="typeShow" @click="typeClick"></u-action-sheet>
				
			<view class="bill-box">
				<view
					class="bill-list"
					v-for="item in billList"
					:key="index"
					@click="billClick(item)"
				>
					<view class="bill-icon blue-bg" v-if="item.type==3">
						<u-icon name="file-text" size="45"></u-icon>
					</view>
					<view class="bill-icon red-bg" v-else-if="item.type==2">
						<u-icon name="red-packet-fill" size="45"></u-icon>
					</view>
					<view class="bill-icon" v-else>
						<u-icon name="rmb" size="45"></u-icon>
					</view>
					<view class="bill-text">
						<view class="title">{{item.title}}</view>
						<view class="grey">{{item.ctime}}</view>
					</view>
					<view class="bill-right" v-if="item.type==3">-{{item.money}}</view>
					<view class="bill-right yellow" v-else>+{{item.money}}</view>
				</view>
			</view>
			<u-loadmore :status="status" class="loadmore-box" />
		</view>
	</MyPage>
</template>		

<script>
import mixin from "@/libs/mixin.js";
export default {
	mixins: [mixin],
	data() {
		return {
			dateShow: false,
			dateParams: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
			typeShow: false,
			typeList: [
				{value:0, text:'全部交易类型'},
				{value:1, text:'充值'}, 
				{value:3, text:'支出'}
			],
			query: {
				date: '',
				type: 0,
				page: 1,
				limit: 10
			},
			dataCount: 0,
			billList: [], 
			status: '加载更多'
		} 
	},
	onLoad() {
		if(!this.$store.state.app.token){
			this.$utils.redirectTo('/pages/login/login',{
				title:"登录",
				subTitle:"请先登录",
				btnValue:"请先登录",
				url:'/login/login'
			});
		}else{
			this.getData();
		}
	}, 
	methods: {
		// query-选择日期
		dateClick(val){
			this.query.date = val.year+"-"+val.month;
			this.clearQuery();
			this.getData();
		},
		// query-选择类型
		typeClick(index){
			this.query.type = index;
			this.clearQuery();
			this.getData();
		},
		// 清空请求参数
		clearQuery(){
			this.query.page = 1;
			this.dataCount = 0;
			this.billList = [];
		},
		// 获取数据
		getData(){
			setTimeout(() => {
				let arr = [];
				uni.request({
					url: 'http://www.txzh.com.cn/api.php?app=Default&act=getBill',  
					method: 'POST',
					header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'X-Requested-With': 'xmlhttprequest'
					},
					data:{
						token:this.$store.state.app.token,
						page:this.query.page,
						ctime:this.query.date,
						type:this.query.type,
						token:this.$store.state.app.token
					},
					success: res => {
						for( var i=0; i<res.data.total2; i++){
							arr.push(res.data.list[i]); 
						};
						this.billList.push(...arr);
						this.dataCount = res.data.total; //总条数
						if(this.query.page >= res.data.totalpage) this.status = 'nomore'; //总页数
						else this.status = 'loading';
					},  
					fail: () => {},  
					complete: () => {}  
				});  
			}, 2000);
		},
		// 列表点击查看详
		billClick(item){
			this.$utils.navigateTo('/wallet/bill-detail',{id:item.id});
		}
	},
	// 下拉加载更多
	onReachBottom() {
		console.log(this.query.page)
		console.log(Math.round(this.dataCount/this.query.limit))
		if( this.query.page > Math.round(this.dataCount/this.query.limit) ) return;
		this.status = 'loading';
		this.query.page = ++this.query.page;
		this.getData();
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.query{
	position: fixed;
	left:0;
	top: 88rpx;
	width: 100%;
	padding:30rpx 0 30rpx 35rpx;
	background: #f3f3f3;
	overflow: hidden;
	font-size:22rpx;
	text{
		float: left;
		margin-right:60rpx;
		/deep/ .u-icon{
			margin-left:10rpx;
			color:#aaa;
		}
	}
}
.bill-box{
	margin-top:88rpx;
	background: #fff;
	.bill-list{
		display: flex;
		justify-content: space-between;
		padding: 28rpx 40rpx;
		border-bottom:1px #eee solid;
		.bill-icon{
			display: flex;
			justify-content: center;
			align-items: center;
			width:70rpx;
			height:70rpx;
			margin-top:10rpx;
			border-radius: 50%;
			background: #f6be09;
			color:#fff;
			&.blue-bg{
				background: #1563ff;
			}
			&.red-bg{
				background: #d00000;
			}
		}
		.bill-text{
			flex: 1;
			margin-left:25rpx;
			.title{
				font-size:30rpx;
			}
			.grey{
				margin-top:15rpx;
				font-size:22rpx;
			}
		}
		.bill-right{
			font-size:34rpx;
			white-space: nowrap;
		}
	}
}
.loadmore-box{
	padding:12rpx 0;
}
</style>